/**
 * VUEshop
 * ============================================================================
 * * 版权所有 2015-2027 深圳搜豹网络科技有限公司，并保留所有权利。
 * 网站地址: http://www.vueshop.com.cn
 * ----------------------------------------------------------------------------
 * 这不是一个自由软件！您只能在不用于商业目的的前提下对程序代码进行修改和使用 .
 * 不允许对程序代码以任何形式任何目的的再发布。
 * ============================================================================
 * $Author: soubao-java 2020-07-22 $
 */<template>
  <div>
    <div
      id="explanation"
      class="explanation"
      style="color: rgb(85, 85, 85); background-color: rgb(243, 244, 244); width: 98%; height: 100%;"
    >
      <div class="bckopa-tips">
        <div class="title">
          <img src="@/static/images/handd.png" alt />
          <h4 title="提示相关设置操作时应注意的要点">操作提示</h4>
        </div>
        <ul>
          <li>发送视频消息请移步粉丝列表</li>
        </ul>
      </div>
      <span title="收起提示" id="explanationZoom" style="display: block;"></span>
    </div>
    <div class="mDiv">
      <div class="ftitle">
        <h3>视频列表</h3>
        <h5>(共 {{totalCount}} 条记录)</h5>
      </div>
      <div class="fbutton">
        <div class="add" @click="addVideo()">
          <span>
            <i class="el-icon-circle-plus" /> 添 加
          </span>
        </div>
      </div>
      <a href @click.prevent="refresh()" class="refresh-date">
        <div title="刷新数据" class="pReload">
          <i class="fa fa-refresh"></i>
        </div>
      </a>
    </div>
    <div class="tablebox">
      <div class="ma-list">
        <div v-if="!videos" class="no-data">
          <i class="fa fa-exclamation-circle"></i>还没有相关素材~
        </div>
        <div class="ma-card" v-for="video in videos">
          <div class="news-border">
            <div class="title ellipsis-1">
              <b>{{video.name}}</b>
            </div>
            <div class="time">{{video.update_time | datefmtAll}}</div>
            <div class="card-item no-line">
              <div class>
                <video
                  v-if="video.path"
                  :src="video.path"
                  width="320"
                  height="180"
                  controls="controls"
                  ref="multimediaList"
                ></video>
              </div>
            </div>
            <div class="desc ellipsis-2">{{video.introduction}}</div>
            <div class="btns">
              <div class="btn" title="删除视频素材" @click="remove(video.id)">
                <span class="fa fa-trash"></span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <el-pagination
        background
        class="paginationbox"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount"
      ></el-pagination>
    </div>
    <el-dialog
      title="视频素材上传"
      :visible.sync="centerDialogVisible"
      width="650px"
      center
      :modal-append-to-body="false"
    >
      <el-form ref="form" :rules="rules" :model="form" label-width="100px">
        <el-form-item label="添加视频" class="video-upload">
          <el-upload
            class="upload-demo"
            ref="upload"
            :action="apiHead + '/mall/upload/wechat/media?type=video'"
            accept=".mp4, .qlv, .qsv, .ogg, .flv, .avi, .wmv, .rmvb, .mkv"
            :data="{title: form.title,introduction:form.introduction}"
            :before-upload="beforeUploadVideo"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :on-change="handleChange"
            :on-success="handleSuccess"
            :file-list="fileList"
            :show-file-list="true"
            :auto-upload="false"
          >
            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
            <div slot="tip" class="el-upload__tip notic">
              <p class="notic">最大10MB，支持MP4格式，点击文件名预览播放</p>
            </div>
          </el-upload>
        </el-form-item>
        <el-form-item label="视频标题" prop="title">
          <el-input v-model="form.title" size="small" class="title"></el-input>
          <p class="notic">标题将展示在相关播放页面，建议填写清晰、准确、生动的标题</p>
        </el-form-item>
        <el-form-item label="视频介绍" prop="introduction">
          <el-input
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 6}"
            placeholder="视频简介"
            v-model="form.introduction"
            size="small"
          ></el-input>
          <p class="notic">介绍语将展示在相关播放页面，建议填写简洁明确、有信息量的内容</p>
        </el-form-item>
        <el-form-item label="预览">
          <video
            v-if="videoPath"
            :src="videoPath"
            width="350"
            height="180"
            autoplay
            controls="controls"
          ></video>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" type="primary" @click="onSubmit('form')" :loading="isLoading">上 传</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getMaterialPage } from "@/utils/api";
export default {
  data() {
    return {
      form: { path: "" },
      videos: [],
      fileList: [],
      centerDialogVisible: false,
      currentPage: this.$route.params.currentPage || 1,
      totalCount: 0,
      pageSize: 10,
      rules: {
        title: [
          {
            required: true,
            message: "请输入标题",
            trigger: "blur",
          },
          {
            maxlmmength: 30,
            message: "标题最长30个字",
            trigger: "blur",
          },
        ],
      },
      isLoading: false,
      videoPath: "",
      previewedVideoUid: null,
    };
  },
  created() {
    this.getPage();
  },
  methods: {
    handleSizeChange(e) {
      this.pageSize = e;
      this.getPage();
    },
    handleCurrentChange(e) {
      this.currentPage = e;
      this.getPage();
    },
    getPage() {
      var that = this;
      getMaterialPage({
        type: "video",
        page: that.currentPage,
        size: that.pageSize,
      }).then(function (res) {
        if (res.msg) {
          that.$message.error(res.msg);
        } else {
          that.videos = res.records;
          that.totalCount = res.total;
        }
      });
    },
    refresh() {
      this.getPage();
      this.$message.success("刷新成功！");
    },
    addVideo() {
      //暂停列表中的播放
      this.$refs.multimediaList.forEach((e) => {
        e.pause();
      });

      this.form = { type: "video" };
      this.fileList = [];
      this.videoPath = "";
      this.previewedVideoUid = null;
      this.centerDialogVisible = true;
    },
    onSubmit(formName) {
      let check = true;
      this.$refs[formName].validate((valid) => {
        if (!valid) {
          check = false;
          return false;
        }
      });
      if (!check) {
        this.$message.error("参数错误");
        this.$forceUpdate();
        return;
      }
      this.$refs.upload.submit();
    },
    remove(id) {
      var that = this;
      this.$confirm("确认删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          that.request.delete("/mall/wx_material?id=" + id).then((res) => {
            if (res.status == 1) {
              that.getPage();
              that.$message.success("删除成功!");
            } else {
              that.$message.error(res.msg);
            }
          });
        })
        .catch(() => {
          that.$message.info("已取消删除");
        });
    },
    //上传前回调
    beforeUploadVideo(file) {
      var fileSize = file.size / 1024 / 1024 < 10;
      if (!fileSize) {
        this.$message.error("视频大小不能超过10MB");
        return false;
      }
    },
    handleRemove(file, fileList) {
      if (file.uid == this.previewedVideoUid) {
        if (fileList.length) {
          this.videoPath = URL.createObjectURL(fileList[0].raw);
          this.previewedVideoUid = fileList[0].uid;
        } else {
          this.videoPath = "";
        }
      }
    },
    handlePreview(file) {
      this.videoPath = URL.createObjectURL(file.raw);
      this.previewedVideoUid = file.uid;
    },
    handleChange(file, fileList) {
      //this.fileList = [file]; //一次只允许上传一个视频
      this.videoPath = URL.createObjectURL(file.raw);
      this.previewedVideoUid = file.uid;
    },
    handleSuccess(res) {
      if (res.status) {
        this.$message.error(res.msg);
        return;
      }
      this.$message.success("上传成功");
      this.getPage();
    },
  },
};
</script>

<style scoped>
@import "../../../../static/css/weixin-mp.css";
>>> .el-textarea .l-input--small {
  width: 200px;
}
>>> .title .el-input__inner {
  width: 395px;
}
.avatar-uploader-icon {
  line-height: 100px;
}
.ma-card .btns .btn {
  width: 100%;
}
.ma-card {
  width: 330px;
}
</style>
